<template>
    <div style=" position: relative;"><el-card>
            <template #header>
                <!-- 搜索 -->
                <div>
                    <el-input style="width: 140px;" v-model="find_data.find" placeholder="姓名" clearable
                        prefix-icon="Search" />

                    <el-date-picker style=" margin-left: 20px;width: 200px;" v-model="data_time" @change="datetime_btn"
                        type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" />

                    <el-select style="margin-left: 20px;width:130px" v-model="find_data.leaveState" placeholder="状态"
                        clearable>
                        <el-option v-for="item in leaveState_type" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>

                    <el-cascader style="width: 200px;margin-left: 20px;" v-model="curval" :options="findAllDeptList_list"
                        :collapse-tags="true" :clearable="true"
                        :props="{ multiple: false, checkStrictly: true, emitPath: true, value: 'id', label: 'name' }"
                        placeholder="请选择部门" :show-all-levels="false" @change="handleChange_find">
                        <template #="{ node, data }">
                            <span>{{ data.deptName }}</span>
                            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                        </template>
                    </el-cascader>

                    <el-select style="margin-left: 20px;width:130px" v-model="find_data.leaveTypeId" placeholder="请假类型"
                        clearable>
                        <el-option v-for="item in findLeaveTypeCombo_list" :key="item.id" :label="item.typeName"
                            :value="item.id" />
                    </el-select>

                    <el-button style="margin-left: 20px;height:30px" @click="search_btn" type="primary"
                        icon="Search">搜索</el-button>
                </div>
                <!-- 功能按钮 -->
                <div style="margin-top:10px;display: flex;">
                    <el-button @click="add_btn" type="primary" icon="Plus">新增请假</el-button>
                    <el-button @click="up_btn" type="primary" icon="WarnTriangleFilled">修改</el-button>
                    <el-button @click="del_btn" type="primary" icon="CircleCloseFilled">删除</el-button>
                    <el-button @click="pass_btn(1)" type="warning" icon="SuccessFilled">审核通过</el-button>
                    <el-button @click="pass_btn(2)" type="warning" icon="CircleCloseFilled">审核不通过</el-button>
                    <el-button @click="absence_btn()" type="warning" icon="Edit">提前销假</el-button>
                    <el-button @click="selinaDriver_btn()" type="danger" icon="Edit">顶班驾驶员设置</el-button>


                </div>
            </template>
            <div>
                <el-table border @header-dragend='headerdragend'  @selection-change="selection_change_btn" height="67vh" ref="multipleTableRef"
                    :data="list_data" style="width: 100%">
                    <el-table-column type="selection" width="35" />
                    <el-table-column label="编号" width="55" fixed type="index" />
                    <template v-for="item in table_data_list_new" :key="item.field">
                        <el-table-column v-if="item.off" :width="item.width" :prop="item.field" :label="item.label">
                            <template v-if="item.field == 'leaveState'" #="{ row, column, $index }">
                                <span>{{ row.leaveState == '0' ? '待审核 ' : row.leaveState == '1' ? '通过 ' :
                                    row.leaveState == '2' ? '拒绝 ' : '强制取消'
                                }}</span>
                            </template>
                            <template v-if="item.field == 'leaveStartTime'" #="{ row, column, $index }">
                                <span>{{ row.leaveStartTime +'至'+row.leaveEndTime}}</span>
                            </template>
                            <template v-if="item.field == 'selinaDayStart'" #="{ row, column, $index }">
                                <span>{{row.selinaDayStart? row.selinaDayStart +'至'+row.selinaDayEnd:''}}</span>
                            </template>
                        </el-table-column>
                    </template>


                </el-table>
            </div>

            <div style="margin-top:20px">
                <el-pagination @current-change="current_change_btn" @size-change="size_change_btn"
                    v-model:current-page="find_data.page.pageNum" v-model:page-size="find_data.page.pageSize"
                    :page-sizes="[20, 50, 100, 200]" :background="true" layout="prev, pager, next, jumper,->,sizes,total,"
                    :total="total" />
            </div>
        </el-card>
    </div>

    <!-- 弹窗 -->
    <div>
        <!-- 表格筛选 -->
        <div style="position: absolute;top:100px;z-index: 9999;" :style="icon_off ? 'right:0px;' : 'right:110px;'">
            <el-icon @click="icon_btn" :size="20">
                <Setting />
            </el-icon>
            <div v-show="icon_off"
                style=" position: relative;top:-100px;right:140px;width: 130px;height:430px;background:#fff;overflow: hidden;">
                <div class="cols-set" style="background:#fff;width:90%;height:97%;margin:auto;margin-top:10px;">
                    <div>
                        <el-button-group style="display: flex; ">
                            <el-tooltip effect="dark" placement="bottom">
                                <template #content>注意：拖动下面的项，可以改变表格列的顺序，<br />记得点击保存才会永久生效哦！ </template>
                                <el-button style="width:10px" type="primary" icon="WarningFilled"></el-button>
                            </el-tooltip>
                            <el-button title="重置" type="primary" icon="Refresh" @click="resetTableSet"></el-button>
                            <el-button title="保存" type="primary" icon="Check" @click="saveTableSet"></el-button>
                        </el-button-group>
                        <div ref="sortableContainer" class="col-items" style="height:400px; overflow-y: auto; ">
                            <el-checkbox class="drag_it" @change="checkbox_btn" v-for="item in sortedItems"
                                :key="item.field" v-model="item.off" :label="item.label" border>
                            </el-checkbox>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 添加修改 -->
        <el-dialog style="margin-top:5vh" v-model="add_off" :title="title" width="40%" :close-on-click-modal='false'>
            <el-form :model="add_data" label-width="130px" label-suffix="：">
                <el-form-item label="姓名">
                    <el-select :disabled="up_btn_data_off" v-model="add_data.userId" clearable placeholder="请选择请假人姓名"
                        style="width: 220px;">
                        <el-option v-for="item in upManageOptions" :key="item.ftUserId" :label="item.realName"
                            :value="item.ftUserId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请假类型">
                    <el-select v-model="add_data.leaveTypeId" clearable placeholder="请选择请假类型" style="width: 220px;">
                        <el-option v-for="item in findLeaveTypeCombo_list" :key="item.id" :label="item.typeName"
                            :value="item.id" />

                    </el-select>
                </el-form-item>
                <el-form-item label="请假时间">
                    <el-date-picker v-model="leaveTime" @change="leaveTime_btn" type="datetimerange"
                        start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm"
                        value-format="YYYY-MM-DD HH:mm" />

                </el-form-item>


                <el-form-item label="请假原因">
                    <el-input show-word-limit maxlength="30" type="textarea" v-model="add_data.leaveReason" />
                </el-form-item>

            </el-form>


            <el-button @click="ok_btn" style="margin-left:30vw" type="primary">确认提交</el-button>
        </el-dialog>
        <!-- 审核通过 -->
        <el-dialog style="margin-top:5vh" v-model="pass_off" title="审核:" width="40%" :close-on-click-modal='false'>
            <el-form :model="checkLeave_data" label-width="130px" label-suffix="：">
                <el-form-item label="审核备注">
                    <el-input placeholder="请输入审核备注" show-word-limit maxlength="200" type="textarea"
                        v-model="checkLeave_data.remark" />
                </el-form-item>

            </el-form>


            <el-button @click="checkLeave_ok_btn" style="margin-left:30vw" type="primary">确认提交</el-button>
        </el-dialog>

        <!-- 提前销假 -->
        <el-dialog style="margin-top:5vh" v-model="absence_off" title="提前销假" width="40%" :close-on-click-modal='false'>
            <el-form :model="absence_data" label-width="130px" label-suffix="：">
                <el-form-item label="姓名">
                    <div>{{ absence_data.name }}</div>
                </el-form-item>
                <el-form-item label="请假类型">
                    <div>{{ absence_data.type }}</div>
                </el-form-item>
                <el-form-item label="提前结束时间">
                    <el-date-picker @change="absenceTime_btn" v-model="absenceTime" type="datetime" placeholder="请选择时间"
                        format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>
                <el-form-item label="提前原因">
                    <el-input placeholder="请输入提前原因" show-word-limit maxlength="200" type="textarea"
                        v-model="absence_data.remark" />
                </el-form-item>
            </el-form>


            <el-button @click="absenceTime_ok_btn" style="margin-left:30vw" type="primary">确认提交</el-button>
        </el-dialog>
        <!-- 顶班驾驶员 -->
        <el-dialog style="margin-top:5vh" v-model="selinaDriver_off" title="顶班驾驶员设置" width="40%"
            :close-on-click-modal='false'>
            <el-form :model="selinaDriver_data" label-width="130px" label-suffix="：">
                <el-form-item label="顶班驾驶员">
                    <el-select v-model="selinaDriver_data.selinaUser" clearable placeholder="请选择请顶班驾驶员"
                        style="width: 220px;">
                        <el-option v-for="item in selinaDriver_list" :key="item.ftUserId" :label="item.realName"
                            :value="item.ftUserId"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="订单时间">
                    <el-date-picker disabled v-model="selinaDriverleaveTime" type="datetimerange" start-placeholder="开始时间"
                        end-placeholder="结束时间" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm" />

                </el-form-item>


                <el-form-item label="顶班备注">
                    <el-input placeholder="请输入顶班备注" show-word-limit maxlength="30" type="textarea"
                        v-model="selinaDriver_data.selinaRemark" />
                </el-form-item>

            </el-form>


            <el-button @click="selinaDriver_ok_btn" style="margin-left:30vw" type="primary">确认提交</el-button>
        </el-dialog>
    </div>
</template>

<script setup>
import {
    line2treeData, findP2CArr, setFmArr

} from '@/utils/common.js'
import Sortable from 'sortablejs';
import { GET_TOKEN } from '@/utils/token.js'
import { ref, reactive, onMounted, computed } from 'vue'
import {
    adupPrivateSet, getPrivateSetList, findLelList, findAllDeptList, findLeaveTypeCombo, findStaffCombo, adupLel,
    delLel, getDriverList, checkLeave, cancelBefore, selinaDriver

} from '@/api/human_resources_center.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import { importCusCheckInData } from '@/utils/common.js'
import CircularJSON from 'circular-json'
onMounted(async () => {
    let leave_list = JSON.parse(localStorage.getItem('leave_list'))
    if (leave_list) {
        find_data.find = leave_list.find
        find_data.deptId = leave_list.deptId
        curval.value = leave_list.deptId
        find_data.stime = leave_list.stime
        find_data.etime = leave_list.etime
        data_time.value = [leave_list.stime, leave_list.etime]
        find_data.leaveState = leave_list.leaveState
        find_data.leaveTypeId = leave_list.leaveTypeId

    }

    getPrivateSetList({
        find: '休假列表',
        page: {
            pageNum: 1,
            pageSize: 20,
        },
    }).then(res => {
        if (res.data.list[0]) {
            table_data_list_new.value = JSON.parse(res.data.list[res.data.list.length - 1].dat)
        } else {
            console.log('no')
            table_data_list_new.value = table_data_list
        }
    })


    Sortable.create(sortableContainer.value, {
        draggable: '.drag_it',
        ghostClass: 'sortable-ghost',
        onEnd: evt => {
            const targetRow = table_data_list_new.value.splice(evt.oldIndex, 1)[0];
            table_data_list_new.value.splice(evt.newIndex, 0, targetRow);

            // 重新赋值给列数组
            // let cols = that.U.scopy(that.fields);
            // let list = cols.filter(it => { return it.show; });
            // that.$emit('saveSet', {dgName: that.dgName, cols: list});
        }
    })


    findAllDeptList({}).then(res => {
        findAllDeptList_list.value = res.data
        findAllDeptList_list.value = line2treeData(findAllDeptList_list.value, 'pid')
        findAllDeptList_list.value = findAllDeptList_list.value[0].children
    })

    findLeaveTypeCombo({}).then(res => {
        findLeaveTypeCombo_list.value = res.data
    })

    findStaffCombo({}).then(res => {
        upManageOptions.value = res.data
    })

    getDriverList({}).then(res => {
        selinaDriver_list.value = res.data
    })


    await list_api()

})

const data_time = ref('')
const datetime_btn = (x, y) => {
    if (x) {
        data_time.value = x
        find_data.stime = data_time.value[0]
        find_data.etime = data_time.value[1]
    } else {
        find_data.stime = ''
        find_data.etime = ''
    }

}
const findAllDeptList_list = ref([])
const handleChange_find = (valarr) => {
    if (valarr) {
        console.log('点击了', valarr);
        find_data.deptId = valarr[valarr.length - 1]
    } else {
        find_data.deptId = ''
    }
}
const findLeaveTypeCombo_list = ref([])
const curval = ref('')





//#region 表格数据处理
const table_data_list = reactive([
    { label: '姓名', field: 'leaveRealName', width: 85, off: true },
    { label: '类型', field: 'leaveTypeName', width: 120, off: true },
    { label: '事由', field: 'leaveReason', width: 220, off: true },
    { label: '状态', field: 'leaveState', width: 90, off: true },
    { label: '请假时间', field: 'leaveStartTime', width: 300, off: true },
    { label: '审核人', field: 'disposeUser', width: 100, off: true },
    { label: '审核时间', field: 'disposeTime', width: 300, off: true },
    { label: '审核备注', field: 'remark', width: 100, off: true },
    { label: '顶班驾驶员', field: 'selinaUser', width: 100, off: true },
    { label: '顶班时间', field: 'selinaDayStart', width: 300, off: true },
   
    { label: '顶班备注', field: 'selinaRemark', width: 220, off: true },
    { label: '添加时间', field: 'addTime', width: 220, off: true },
])

const table_data_list_new = ref([])
const icon_off = ref(false)
// 创建排序容器的引用
const sortableContainer = ref('')

const icon_btn = () => {
    icon_off.value = !icon_off.value
    console.log(sortableContainer.value)

}
const resetTableSet = () => {
    console.log(table_data_list)
    table_data_list_new.value = JSON.parse(JSON.stringify(table_data_list))
    console.log(table_data_list)
    console.log(table_data_list_new.value)
}
const saveTableSet = () => {
    adupPrivateSet({
        dat: JSON.stringify(table_data_list_new.value),
        tbName: '休假列表',
        tbNum: "leave_list",
    }).then(res => {
        if (res.code == 1) {
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
    icon_off.value = false
}

const checkbox_btn = (e, c) => {
    for (let i = 0; i < table_data_list_new.value.length; i++) {
        if (table_data_list_new.value[i].label == c.target._value) {
            table_data_list_new.value[i].off == e

        }

    }

}

const sortedItems = computed(() => {
    return [...table_data_list_new.value].sort((a, b) => a.id - b.id);
})
//#endregion

//#region 审核通过
const pass_off = ref(false)
const checkLeave_data = reactive({
    id: "",
    leaveState: "",
    remark: '',
})
const pass_btn = (e) => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }
    checkLeave_data.leaveState = e
    checkLeave_data.id = table_list.value[0].id
    checkLeave_data.remark = ''
    pass_off.value = true
}
const checkLeave_ok_btn = () => {
    checkLeave(checkLeave_data).then(res => {
        if (res.code == 1) {
            list_api()
            pass_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            list_api()
            pass_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })

}
// #endregion

// #region 提前销假
const absence_off = ref(false)
const absence_data = reactive({
    id: '',
    leaveEndTime: "",
    remark: "",
    name: "",
    type: "",
})
const absence_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }
    absence_data.id = table_list.value[0].id
    absence_data.name = table_list.value[0].leaveRealName
    absence_data.type = table_list.value[0].leaveTypeName
    absence_data.leaveEndTime = ''
    absence_data.remark = ''
    absenceTime.value = ''
    absence_off.value = true
}
const absenceTime = ref('')
const absenceTime_btn = (e) => {
    absenceTime.value = e
    absence_data.leaveEndTime = e
}
const absenceTime_ok_btn = () => {
    cancelBefore(absence_data).then(res => {
        if (res.code == 1) {
            list_api()
            absence_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            list_api()
            absence_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
}
// #endregion

//#region 顶班设置
const selinaDriver_off = ref(false)
const selinaDriver_list = ref([]) // 顶班驾驶员
const selinaDriver_data = reactive({
    id: '',
    isConfirm: "",
    selinaDayEnd: "",
    selinaDayStart: "",
    selinaUser: "",
    selinaRemark: "",
})

const selinaDriverleaveTime = ref([])
const selinaDriver_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }
    selinaDriverleaveTime.value = [table_list.value[0].leaveStartTime, table_list.value[0].leaveEndTime]
    selinaDriver_data.selinaDayStart = table_list.value[0].leaveStartTime
    selinaDriver_data.selinaDayEnd = table_list.value[0].leaveEndTime
    selinaDriver_data.id = table_list.value[0].id
    selinaDriver_data.isConfirm = ''
    selinaDriver_data.selinaUser = table_list.value[0].selinaUser
    selinaDriver_data.selinaRemark = table_list.value[0].selinaRemark
    selinaDriver_off.value = true
}
const selinaDriver_ok_btn = () => {
    selinaDriver(selinaDriver_data).then(res => {
        if (res.code == 1) {
            list_api()
            selinaDriver_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            list_api()
            selinaDriver_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
}
//#endregion

//#region 查询时间类型
const leaveState_type = reactive([
    {
        value: '0',
        label: '待审核',
    },
    {
        value: '1',
        label: '通过',
    }, {
        value: '2',
        label: '拒绝',
    }, {
        value: '-1',
        label: '强制取消',
    },
])
//#endregion
//#region 分页列表
const list_data = ref([])
const find_data = reactive({
    page: {
        pageNum: 1,
        pageSize: 20,
    },
    deptId: '',
    stime: '',
    etime: '',
    find: "",
    leaveState: "",
    leaveTypeId: '',
})
const total = ref(0)

// 分页器一夜显示多少数据页面
const size_change_btn = () => {
    find_data.page.pageNum = 1
    list_api()
}

// 分页器跳转页面
const current_change_btn = () => {
    list_api()
}

const list_api = () => {

    findLelList(find_data).then(res => {
        list_data.value = res.data.list
        total.value = res.data.total
    })
}
//#endregion

//#region 添加
const add_off = ref(false)
const title = ref('新增请假')

const add_data = reactive({
    id: '',
    leaveEndTime: '',
    leaveReason: "",
    leaveStartTime: "",
    leaveTypeId: "",
    userId: "",
})
const upManageOptions = ref([])
const leaveTime = ref('')
const leaveTime_btn = (e) => {
    if (e) {
        leaveTime.value = e
        add_data.leaveStartTime = leaveTime.value[0]
        add_data.leaveEndTime = leaveTime.value[1]
    } else {
        add_data.leaveStartTime = ''
        add_data.leaveEndTime = ''
    }
}
const add_btn = () => {
    title.value = '新增请假'
    add_data.id = ''
    add_data.leaveEndTime = ''
    add_data.leaveReason = ''
    add_data.leaveStartTime = ''
    add_data.leaveTypeId = ''
    add_data.userId = ''
    leaveTime.value = ''
    up_btn_data_off.value = false
    add_off.value = true

}


//#endregion

//#region 表格选择
const table_list = ref([])
const headerdragend = (newWidth,oldWidth,column) =>{
    console.log(newWidth,oldWidth,column)
    for(let i =0;i<table_data_list_new.value.length;i++){
        if (column.property == table_data_list_new.value[i].field) {
            table_data_list_new.value[i].width = newWidth
        }
    }
}
const selection_change_btn = (e) => {
    table_list.value = e
    console.log(e)
}
//#endregion
//#region 修改
const up_btn_data_off = ref(false)
const up_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }

    up_btn_data_off.value = true
    title.value = '修改请假信息'
    add_data.id = table_list.value[0].id
    add_data.userId = table_list.value[0].userId
    add_data.leaveTypeId = table_list.value[0].leaveTypeId
    add_data.leaveEndTime = table_list.value[0].leaveEndTime
    add_data.leaveReason = table_list.value[0].leaveReason
    add_data.leaveStartTime = table_list.value[0].leaveStartTime
    leaveTime.value = [table_list.value[0].leaveStartTime, table_list.value[0].leaveEndTime]
    add_off.value = true
}
//#endregion

// 提交
const ok_btn = () => {

    if (!add_data.leaveEndTime) {
        return ElMessage({
            message: '请输入请假结束时间',
            type: 'warning',
        })
    } else if (!add_data.leaveReason) {
        return ElMessage({
            message: '请输入请假原因',
            type: 'warning',
        })
    } else if (!add_data.leaveStartTime) {
        return ElMessage({
            message: '请输入请假开始时间',
            type: 'warning',
        })
    } else if (!add_data.leaveTypeId) {
        return ElMessage({
            message: '请选择请假类型',
            type: 'warning',
        })
    } else if (!add_data.userId) {
        return ElMessage({
            message: '请选择请假人',
            type: 'warning',
        })
    }






    if (title.value == '新增请假') {



        adupLel(add_data).then(res => {
            if (res.code == 1) {
                list_api()
                add_off.value = false
                return ElMessage({
                    message: res.msg,
                    type: 'success',
                })
            } else {
                return ElMessage({
                    message: res.msg,
                    type: 'warning',
                })
            }
        })
    } else {

        adupLel(add_data).then(res => {
            if (res.code == 1) {
                list_api()
                add_off.value = false
                return ElMessage({
                    message: res.msg,
                    type: 'success',
                })
            } else {
                return ElMessage({
                    message: res.msg,
                    type: 'warning',
                })
            }
        })
    }
}


//#region 删除
const del_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }

    ElMessageBox.confirm(
        `是否确认删除【${table_list.value[0].leaveRealName}】请假?`,
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            distinguishCancelAndClose: 'true',
        }
    )
        .then(() => {
            delLel({
                id: table_list.value[0].id
            }).then(res => {
                if (res.code == 1) {
                    list_api()
                    return ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            })
        })
        .catch((e) => {
            if (e == 'cancel') {
                ElMessage({
                    type: 'warning',
                    message: '取消删除成功',
                })
            }

        })

}
//#endregion

//#region 搜索
const search_btn = () => {
    localStorage.setItem('leave_list', CircularJSON.stringify(find_data))
    list_api()
}
//#endregion


</script>

<style scoped lang='scss'>
</style>

<style>
.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}


.el-table .el-table__cell {
    padding: 0px !important;
}
</style>
